<template>
  <div class="group-table-box">
    <Row class="group-top">
      <Col span="8" offset="16" class="group-right">
        <div class="input-item" style="margin: 0;">
          <Button type="info" @click="clickAddModal">添加活动商品</Button>
        </div>
      </Col>
    </Row>
    <Tabs value="name1">
      <TabPane label="团购" name="name1">
        <Table
          border
          class="table-container-table"
          :columns="columns7"
          :data="tableData"
          :loading="isLoading"
        ></Table>
        <Page
          :total="totalPageCount"
          :current="form.pageIndex"
          :page-size="10"
          show-elevator
          class="table-container-page"
          @on-change="getTableData"
        />
      </TabPane>
      <TabPane label="预售" name="name2">
        <Table
          border
          class="table-container-table"
          :columns="columns7"
          :data="tableData"
          :loading="isLoading"
        ></Table>
        <Page
          :total="totalPageCount"
          :current="form.pageIndex"
          :page-size="10"
          show-elevator
          class="table-container-page"
          @on-change="getTableData"
        />
      </TabPane>
      <TabPane label="拼单" name="name3">
        <Table
          border
          class="table-container-table"
          :columns="columns7"
          :data="tableData"
          :loading="isLoading"
        ></Table>
        <Page
          :total="totalPageCount"
          :current="form.pageIndex"
          :page-size="10"
          show-elevator
          class="table-container-page"
          @on-change="getTableData"
        />
      </TabPane>
    </Tabs>

    <!-- 点击新增活动 -->
    <Modal
      v-model="showAddModal"
      width="50"
      footer-hide
    >
      <div class="modal-container">
        <Row class="modal-content" :gutter="16">
          <Col span="6">
            <p class="modal-label">活动类型</p>
          </Col>
          <Col span="18">
            <Select v-model="form.activityType">
              <Option value="团购">团购</Option>
              <Option value="拼单">拼单</Option>
            </Select>
          </Col>
        </Row>
        <div class="" v-if="form.activityType == '拼单'">
          <Row class="modal-content" :gutter="16">
            <Col span="6">
              <p class="modal-label">拼单商品选择</p>
            </Col>
            <Col span="9">
              <Select v-model="form.class">
                <Option value="撒钱活动">撒钱活动</Option>
                <Option value="VIP活动">VIP活动</Option>
              </Select>
            </Col>
            <Col span="9">
              <Select v-model="form.class">
                <Option value="撒钱活动">撒钱活动</Option>
                <Option value="VIP活动">VIP活动</Option>
              </Select>
            </Col>
          </Row>
          <Row class="modal-content" :gutter="16">
            <Col span="6">
              <p class="modal-label">拼单价格设置</p>
            </Col>
            <Col span="18">
              <Input v-model="form.price" placeholder="请输入...">
                <span slot="append">元</span>
              </Input>
            </Col>
          </Row>
          <Row class="modal-content" :gutter="16">
            <Col span="6">
              <p class="modal-label">拼单人数上限</p>
            </Col>
            <Col span="18">
              <Input v-model="form.count" placeholder="请输入...">
                <span slot="append">人</span>
              </Input>
            </Col>
          </Row>
        </div>
        <div class="" v-if="form.activityType == '团购'">
          <Row class="modal-content" :gutter="16">
            <Col span="6">
              <p class="modal-label">团购商品选择</p>
            </Col>
            <Col span="9">
              <Select v-model="form.class">
                <Option value="撒钱活动">撒钱活动</Option>
                <Option value="VIP活动">VIP活动</Option>
              </Select>
            </Col>
            <Col span="9">
              <Select v-model="form.class">
                <Option value="撒钱活动">撒钱活动</Option>
                <Option value="VIP活动">VIP活动</Option>
              </Select>
            </Col>
          </Row>
          <Row class="modal-content" :gutter="16">
            <Col span="6">
              <p class="modal-label">团购价格设置</p>
            </Col>
            <Col span="18">
              <Input v-model="form.price" placeholder="请输入...">
                <span slot="append">元</span>
              </Input>
            </Col>
          </Row>
          <Row class="modal-content" :gutter="16">
            <Col span="6">
              <p class="modal-label">团购人数上限</p>
            </Col>
            <Col span="18">
              <Input v-model="form.count" placeholder="请输入...">
                <span slot="append">人</span>
              </Input>
            </Col>
          </Row>
        </div>
        <div slot="footer" class="modal-footer">
          <Button type="primary" @click="onClickAddConfirm">完成</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showAddModal: false,
      isLoading: false,
      form: {
        pageIndex: 1,
        activityType: ''
      },
      totalPageCount: 10,
      columns7: [
        {
          title: '序号',
          type: 'index',
          align: 'center'
        },
        {
          title: '商品名称',
          key: 'groupName',
          align: 'center'
        },
        {
          title: '活动开始时间',
          key: 'issueTime',
          align: 'center'
        },
        {
          title: '所属商品分类',
          key: 'userName',
          align: 'center'
        },
        {
          title: '原始价格',
          key: 'price',
          align: 'center'
        },
        {
          title: '活动价格',
          key: 'tagListLabel',
          align: 'center'
        },
        {
          title: '团购量',
          key: 'groupStatusText',
          align: 'center'
        },
        {
          title: '状态',
          key: 'groupStatusText',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 280,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.check(params.index)
                  }
                }
              }, '结束活动'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.success(params.index)
                  }
                }
              }, '查看详情'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '删除记录')
            ]);
          }
        }
      ],
      tableData: [{
        groupStatusText: '123123'
      }],
      checkReturnData: {
      }
    }
  },
  mounted() {
    this.getTableData();
  },
  watch: {
  },
  methods: {
    onClickSearch() {

    },
    clickAddModal() {
      // 点击添加活动商品
      this.showAddModal = true
    },
    onClickAddConfirm() {
      // 点击modal的确定按钮

    },
    onClickReset() {

    },
    onClickDeleteConfirm() {

    },
    check(index) {

    },
    success(index) {

    },
    remove(index) {

    },
    getTableData(index) {

    },
    onClickDatePickerChange(e) {
      // ["2018-08-07", "2018-09-12"]
      // this.form.date = e;
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input-flex {
  display: inline-flex !important;
  flex-direction: column;
}
.pull-right {
  float: right;
}
.group-table-box {
  padding: 20px;
}
.group-top {
  display: flex;
  align-items: flex-end;
}
.group-right {
  display: flex;
  justify-content: flex-end;
}
.input-item {
  display: inline-block;
  margin: 0 20px 20px 0;
  color: #000;
}
.input-btn {
  margin-right: 10px;
}
.table-container-page {
  text-align: center;
  margin-top: 20px;
  color: #000;
}
.modal-container {
  padding: 30px 30px 20px 30px;
}
.modal-content {
  margin-top: 15px;
}
.modal-label {
  line-height: 32px;
  font-size: 14px;
  text-align: center;
}
.modal-label-detail {
  text-align: center;
}
.modal-input {
  width: 100%;
}
.modal-footer {
  text-align: center;
  margin-top: 15px;
}
.modal-footer button {
  color: #fff;
  width: 100px;
}
</style>
